<!--
* @description 资料数据库
* @fileName data.vue
* @author huangyu
* @date 2022/06/15 15:29:55
!-->
<template>
    <div>
        <van-sticky>
            <van-search v-model="name" placeholder="请输入物品关键词" @search="changeData" @cancel="changeData" />
            <div>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="ZBType" :options="option1" @change="changeData" />
                    
                    <van-dropdown-item v-model="wqType" v-if="ZBType==1" :options="WQType" @change="changeData" />
                    <van-dropdown-item v-model="fjType" v-if="ZBType==2" :options="FJType" @change="changeData" />
                    <van-dropdown-item v-model="fjType" v-if="ZBType==3" :options="SPType" @change="changeData" />

                    <van-dropdown-item v-model="pingzhi" :options="option2" @change="changeData" />
                </van-dropdown-menu>
            </div>
        </van-sticky>

        <div style="margin:10px 0;">
            <van-cell value="" v-for="(item,index) in list" :key="index" is-link @click="showPopup(item)">
                <el-row>
                    <el-col :span="4">
                        <div class="icon" :style="{background:'url(/aion/images/game/icon/items/'+item.icon+')',width:'40px',height:'40px',display:'inline-block'}" v-if="item.icon"></div>
                    </el-col>
                    <el-col :span="20">
                        <div>
                            <strong v-if="item.pingzhi == '英雄'" class="color_yx">{{ item.name }}</strong>
                            <strong v-if="item.pingzhi == '唯一'" class="color_wy">{{ item.name }}</strong>
                        </div>
                        <div style="color:#999">{{item.level}} {{item.pingzhi}} {{item.type}}</div>
                    </el-col>
                </el-row>
            </van-cell>
        </div>

        <van-popup v-model="showDetail" round position="bottom" :style="{ height: '55%' }">
            <vDataDetail :model="detailModel"></vDataDetail>
        </van-popup>

        <van-pagination v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />
    </div>
</template>

<script>
// import { Toast } from 'vant';
import { get } from '@/common/app.js'
import vDataDetail from './dataDetail.vue'
export default {
    components: {vDataDetail},
    data() {
        return {
            showDetail: false,
            detailModel: {},
            list: [],
            currentPage: 1,

            pageindex: 1,
            pagesize: 20,
            total: 0,
            
            name: '',
            
            ZBType: 1,
            wqType: '',
            fjType: '',
            pingzhi: '',

            option1: [
                { text: '武器', value: 1 },
                { text: '防具', value: 2 },
                { text: '饰品', value: 3 },
            ],
            option2: [
                { text: '物品品质', value: '' },
                { text: '唯一', value: '唯一' },
                { text: '英雄', value: '英雄' },
            ],
            WQType: [
                {text:"武器类型",value:"",},
                {text:"单手剑",value:"单手剑",},
                {text:"巨剑",value:"巨剑",},
                {text:"锤",value:"锤",},
                {text:"匕首",value:"匕首",},
                {text:"法杖",value:"法杖",},
                {text:"法典",value:"法典",},
                {text:"宝珠",value:"宝珠",},
                {text:"弓",value:"弓",},
                {text:"战戟",value:"战戟",},
            ],
            FJType: [
                {text:"防具类型",value:"",},
                {text:"布甲",value:"布甲",},
                {text:"皮甲",value:"皮甲",},
                {text:"琐甲",value:"琐甲",},
                {text:"板甲",value:"板甲",},
                {text:"盾牌",value:"盾牌",},
                {text:"腰带",value:"腰带",},
                {text:"头饰",value:"头饰",},
            ],
            SPType: [
                {text:"饰品类型",value:"",},
                {text:"戒指",value:"戒指",},
                {text:"项链",value:"项链",},
                {text:"耳环",value:"耳环",},
                {text:"翅膀",value:"翅膀",},
            ],
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData(){
            let params = {
                type: 'getAionData',
                cType: this.ZBType,
                data: {
                    name: this.name,
                    wqType: this.wqType,
                    fjType: this.fjType,
                    // min: this.min,
                    // max: this.max,
                    pingzhi: this.pingzhi,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total

                    // console.log(this.list)
                    // 方便后续操作，默认添加当前装备类型
                    if(this.list.length>0){
                        this.list.forEach(item=>{
                            item.ZBType = this.ZBType
                        })
                    }
                }
            })
        },
        changeData(){
            if(this.ZBType==1)
                this.fjType = ''
            else if(this.ZBType==2)
                this.wqType = ''
            this.pageindex = 1
            this.getData()
        },

        changePage(value){
            this.pageIndex = value
            this.getData()
        },

        showPopup(row){
            this.showDetail = true
            this.detailModel = row
        },
    },
}
</script>

<style scoped>
</style>